<template>
  <!-- 登录卡片 -->
  <div class="container" :key="keyNumber" @click="handleClick">
    <el-card class="el-card" style="border-radius: 20px" shadow="hover">
      <div class="card">
        <div class="image">
          <img :src="imgSrc" width="100%" height="auto" />
        </div>
        <div class="note">
          <h1>{{ noteText }}</h1>
        </div>
      </div>
    </el-card>
  </div>
  <!-- 注册卡片 -->
  <!-- //// -->
</template>

<script>
export default {
  name: "Login",
  props: {
    keyNumber: {
      type: Number,
      required: true,
    },
    imgSrc: {
      type: String,
      required: true,
    },
    noteText: {
      type: String,
      required: true,
    },
  },
  /* 声明事件名称列表 */
  emits: ["open-personal-login", "open-institution-login"],
  methods: {
    handleClick() {
      if (this.keyNumber === '1') {
        this.$emit("open-personal-login");
      } else if (this.keyNumber === '2') {
        this.$emit("open-institution-login");
      }
    },
  },
};
</script>

<style scoped>
.container {
  width: 220px;
  margin: 10px 30px;
  cursor: pointer; /* 手形指针 */
  transition: all 0.2s;
}

.container:active {
  transform: scale(0.98);
}

.el-card {
  width: 100%;
  height: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
}

.image {
  display: flex;
  align-items: center;
  justify-content:center;
  width: 100%;
  height: 150px; /* 固定高度 */
  background-color: #fff;
}

.card-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 填充空白 */
}

.note {
  margin-top: 20px;
  font-size: 10px;
}
</style>
